<template>
  <div>
    <mt-swipe :auto="3000">
      <mt-swipe-item v-for="(item,index) in imgs" :key="index">
        <a :href="item.url">
          <img :src="item.img" alt="">
        </a>
      </mt-swipe-item>
    </mt-swipe>

  </div>
</template>

<script>
export default {
  name: 'my-swiper',
  props: ['url'],
  data () {
    return {
      imgs: []
    }
  },
  created () {
    this.$axios.get(this.url)
      .then(res => {
        // console.log(res.data.message)
        this.imgs = res.data.message
      })
      .catch(err => console.log(err))
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mint-swipe {
    height: 200px;
  }
  .mint-swipe-item:nth-child(1) {
    background-color: red;
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
